<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业信息录入</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            font-family: '.PingFangSC-Regular', '.PingFang SC';
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            text-decoration: none;
            color: #333333;
            line-height: 14px;
        }

        h3 {
            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
            font-weight: bold;
            font-style: normal;
            font-size: 16px;
            padding: 20px 0;
        }

        textarea {
            width: 370px;
            height: 80px;
            resize: none;
            vertical-align: top;
            line-height: 18px;
            padding: 3px;
        }

        input[type=file] {
            opacity: 0;
        }

        #cpBase {
            padding: 50px;
        }

        /* input 输入框*/
        .ipt {
            padding: 12px 0;
        }

        .ipt label {
            width: 80px;
            display: inline-block;
        }

        .ipt input {
            width: 250px;
            height: 30px;
            padding-left: 3px;
        }

        .ipt span {
            padding-left: 10px;
        }

        /**单选*/
        .rdi {
        }

        .rdi input {
            width: 13px;
            height: 13px;
        }

        .rdi span {
            padding-right: 10px;
        }

        /*验资*/
        .agr {
        }

        .agr label {
            width: 100px;
        }

        /*文件*/
        .agr button {
            width: 140px;
            height: 30px;
            opacity: 100;
        }

        .agr input {
            display: none
        }

        .agr .file-label {
            width: max-content
        }
            .agr .progress{
                display: none;
                padding-left: 10px;
            }
        /*提交*/
        .sub {
        }

        .sub button {
            width: 110px;
            height: 40px;
            border-color: #26A7DE;
            border-radius: 5px;
            background-color: white;
            margin: 50px;
        }

        .sub #go {
            color: #26A7DE;
        }

        .sub #insert {
            background-color: #26A7DE;
            color: white;
        }
    </style>
</head>
<body>
<div id="cpBase" class="">

    <!--企业名字-->
    <div class="company">
        <div class="ipt">
            <label>企业名称：</label>
            <input type="text" placeholder="请输入" id="companyName">
        </div>
        <div class="rdi ipt">
            <label>名单类型：</label>
            <input type="radio" name="companyStatus" value="1"> <span>正常名单</span>
            <input type="radio" name="companyStatus" value="2"> <span>白名单</span>
            <input type="radio" name="companyStatus" value="3"> <span>灰名单</span>
            <input type="radio" name="companyStatus" value="4"> <span>黑名单</span>
        </div>
    </div>
    <!--1、信用评分-->
    <h3>1、信用评分</h3>
    <div class="score">
        <div class="ipt">
            <label>日常行为：</label>
            <input type="text" placeholder="请输入" id="behaviorScore">
            <span>分</span>
        </div>
        <div class="ipt">
            <label>合规：</label>
            <input type="text" placeholder="请输入" id="complianceScore">
            <span>分</span>
        </div>
        <div class="ipt">
            <label>诚信：</label>
            <input type="text" placeholder="请输入" id="sincerityScore">
            <span>分</span>
        </div>
        <div class="ipt">
            <label>法务：</label>
            <input type="text" placeholder="请输入" id="lawScore">
            <span>分</span>
        </div>
        <div class="ipt">
            <label>税务：</label>
            <input type="text" placeholder="请输入" id="taxScore">
            <span>分</span>
        </div>
    </div>
    <!--2、风险提示-->
    <h3>2、风险提示</h3>
    <div class="risk">
        <div class="ipt">
            <label>问题代码：</label>
            <input type="text" placeholder="请输入" id="riskProblemCode">
        </div>
        <div class="ipt">
            <label>问题等级：</label>
            <input type="text" placeholder="请输入" id="riskRank">
        </div>
        <div class="ipt">
            <label>风险提示：</label>
            <textarea placeholder="请输入" id="riskCue"></textarea>
        </div>
        <div class="ipt">
            <label>内容：</label>
            <textarea placeholder="请输入" id="riskDetail"></textarea>
        </div>
        <div class="ipt">
            <label>建议：</label>
            <textarea placeholder="请输入" id="riskSuggest"></textarea>
        </div>
    </div>
    <!--2、相关协议-->
    <h3>3、相关协议</h3>
    <div class="agr">
        <div class="ipt">
            <label>合作协议：</label>
            <button>
                <label for="cooperativeAgr" class="file-label">
                    +上传文件
                    <input type="file" id="cooperativeAgr">
                </label>
            </button>
            <span>*请上传不大于20M的PDF文件或压缩包</span>
            <p class="progress">
                <progress  value="0" max="100"></progress>
                <span ></span>
            </p>
        </div>
        <div class="ipt">
            <label>验资报告：</label>
            <button>
                <label for="capitalVerificationReportAgr" class="file-label">
                    +上传文件
                    <input type="file" id="capitalVerificationReportAgr">
                </label>
            </button>
            <span>*请上传不大于20M的PDF文件或压缩包</span>
            <p class="progress">
                <progress  value="0" max="100"></progress>
                <span ></span>
            </p>
        </div>
        <div class="ipt">
            <label>投资协议：</label>
            <button>
                <label for="investmentAgr" class="file-label">
                    +上传文件
                    <input type="file" id="investmentAgr">
                </label>
            </button>
            <span>*请上传不大于20M的PDF文件或压缩包</span>
            <p class="progress">
                <progress  value="0" max="100"></progress>
                <span ></span>
            </p>
        </div>
        <div class="ipt">
            <label>银税监管协议：</label>
            <button>
                <label for="taxAgr" class="file-label">
                    +上传文件
                    <input type="file" id="taxAgr">
                </label>
            </button>
            <span>*请上传不大于20M的PDF文件或压缩包</span>
            <p class="progress">
                <progress  value="0" max="100"></progress>
                <span ></span>
            </p>
        </div>
        <div class="ipt">
            <label>其它补充材料：</label>
            <button>
                <label for="otherMaterialAgr" class="file-label">
                    +上传文件
                    <input type="file" id="otherMaterialAgr">
                </label>
            </button>
            <span>*请上传不大于20M的PDF文件或压缩包</span>
            <p class="progress">
                <progress  value="0" max="100"></progress>
                <span ></span>
            </p>
        </div>
        <div class="ipt">
            <label>季度报表：</label>
            <button>
                <label for="quarterlyReportAgr" class="file-label">
                    +上传文件
                    <input type="file" id="quarterlyReportAgr">
                </label>
            </button>
            <span>*请上传不大于20M的PDF文件或压缩包</span>
            <p class="progress">
                <progress  value="0" max="100"></progress>
                <span ></span>
            </p>
        </div>
        <div class="ipt">
            <label>补充附件：</label>
            <button>
                <label for="accessoryAgr" class="file-label">
                    +上传文件
                    <input type="file" id="accessoryAgr">
                </label>
            </button>
            <span>*请上传不大于20M的PDF文件或压缩包</span>
            <p class="progress">
                <progress  value="0" max="100"></progress>
                <span ></span>
            </p>
        </div>
    </div>
    <!-- 提交 or 返回-->
    <div class="sub">
        <button id="go">返回</button>
        <button id="insert">提交</button>
    </div>
</div>

<br />
<br />
<br />
<br />

<progress id="progressBar" value="0" max="100"></progress>
<span id="percentage"></span>

<br />
<br />
<br />
<br />
<script src="./jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
    var FileController = "http://localhost:8080/sichuansfc/fileUpload";                    // 接收上传文件的后台地址

    var company = {
        "companyName":"",
        "companyStatus":"",
        "behaviorScore":"",
        "sincerityScore":"",
        "lawScore":"",
        "taxScore":"",
        "complianceScore":"",
        "riskDetail":"",
        "riskCue":"",
        "riskSuggest":"",
        "riskProblemCode":"",
        "riskRank":"",
        "cooperativeAgr":"",
        "capitalVerificationReportAgr":"",
        "taxAgr":"",
        "investmentAgr":"",
        "otherMaterialAgr":"",
        "quarterlyReportAgr":"",
        "accessoryAgr":""
    }
    // input框取值
    $('input[type="text"],textarea').change(function (e) {
        company[$(this).attr("id")] = $(this).val();
    })
    $('input[type="radio"]').click(function (e) {
        company[$(this).attr("name")] = $(this).val();
    })
    /**
     *  单文件上传
     */
    $('input[type="file"]').change(function (e) {
            //获取获取进度条
            $($(this).parent().parent().parent().children(".progress")).css("display", "inline");
            var progressBar = $($(this).parent().parent().parent().children(".progress")).children("progress");
            var percentage = $($(this).parent().parent().parent().children(".progress")).children("span");
            var _this = this;

            //获取文件名
            var filePath = $(this).val()
            if (filePath.lastIndexOf("\\") > 0) {
                filePath = filePath.substring(filePath.lastIndexOf("\\") + 1);
            }
            $(this).parent().parent().parent().children("span").text(filePath);

            // FormData 对象 获取文件数据流
            var formData = new FormData();
            formData.append("fileName", this.files[0]);
            $.ajax({
                url: "http://localhost:8080/sichuansfc/fileUpload",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.onprogress = function (progress) {
                            if (progress.lengthComputable) {
                                $(progressBar).attr("max", progress.total);
                                $(progressBar).val(progress.loaded) ;
                                $(percentage).html( Math.round(progress.loaded / progress.total * 100) + "%");
                            }
                        };
                        xhr.upload.onloadstart = function () {
                            console.log('started...');
                        };
                    }
                    return xhr;
                },
                success: function (data) {
                    if(data.status == 100000){
                        $(percentage).html(100+ "%");
                        company[$(_this).attr("id")] = data.data;
                    }else {
                        alert(data.msg)
                    }
                },
                error: function () {
                    $(percentage).html( 0 + "%");
                    alert("上传失败！");
                }
            });
        }
    )

    /**
     *  文件上传 进度条
     * @param evt
     * @param progressBar 进度条
     * @param percentage 90%
     */
    function progressFunction(evt,progressBar, percentage) {
        if (evt.lengthComputable) {
            // $(progressBar).setAttribute("max", evt.total);
            $(progressBar).attr("max", evt.total);
           // percentage.max(evt.total)
            $(progressBar).val(evt.loaded) ;
            $(percentage).html( Math.round(evt.loaded / evt.total * 100) + "%");
        }
    }


    /**
     *  提交
     */
    $("#insert").click(function () {
        $.ajax({
            url: 'http://localhost:8080/sichuansfc/company',
            type: "POST",
            data: JSON.stringify(company),
            contentType: 'application/json',
            success: function (data) {
                alert(data.msg)
            },
            error: function () {
                alert("上传失败！");
            }
        });
    })
</script>
</body>
</html>
